<template>
<i class=" fa fa-chevron-left" @click="fanhui"></i>
 <div class="shang">
     <div class="last"></div>
     <div class="last"></div>
     <div class="last"></div>
     <div class="last"></div>
 </div>
 <p class="shangpin">全部商品&nbsp;&nbsp;<i class=" fa fa-chevron-right"></i></p>
 <hr/>
 <div class="zhong">
     <div class="xiao1"></div>
     <p class="wanjia">玩家法则</p>
     <div class="xiao1"></div>
     <p class="wanjia">玩家法则</p>
     <div class="xiao1">
     </div>
      <p  class="wanjia">玩家法则</p>
 </div>
 <p style="font-size:16px;margin-top:10px">720已经开盒</p>
 <div class="dibu" >
    <span style="font-size:16px">盒子</span>
    <h1><b>79:00</b></h1>
 </div>
 <p style="font-size:20px">苹果全家桶来袭</p>
 <p style="font-size:20px">新版ipad</p>
 <div class="wei">
    <van-button type="info">信息按钮</van-button>
     <van-button type="primary" @click="showPopup">主要按钮</van-button>
 </div>

<van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }" >
  <i class="fa fa-close"  @click="shiqu" ></i><br>
  <input type="checkbox" v-model="show1"><button @click="show1=!show1">同意</button><router-link :to="{name:'xieyi'}">《用户协议》</router-link>
  <button style="width:100%" @click="tongyi">同意并继续</button>
</van-popup>
</template>

<script>
import { ref } from 'vue';
export default {
  data(){
    return{
      show1:false,
    }
  },
  methods:{
    tongyi(){
        this.$router.push({name:'kaihe'})
    },
  fanhui(){
    this.$router.push({name:'lunbo'})
  },
  shiqu(){
    this.show=false;
  }
},
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
}
</script>

<style scoped>
.shang{
   display:flex;
   justify-content: space-around;
   align-items: center;
}
   .last{
    height: 50px;
    width:50px;
     background-color: yellow;
   }
   .shangpin{
    margin-top:10px;
    text-align: center;
    font-size:16px;
   }
   .zhong{
     height:300px;
     background-color: gray;
   }
   .xiao1{
    margin-top:10px;
    height:60px;
    width:60px;
    background-color: chartreuse;
    border-radius: 50%;
   }
   .wanjia{
    text-align: center;
    width:80px;
      font-size: 20px;
      background-color: white;
   }
  .dibu{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50px;
     background-color:orange;
  }
  .wei{
    display: flex;
   justify-content: space-around;

  }
</style>